<template>
	<view class="card">
		<view class="header">
			<text>{{title}}</text>
		</view>
		<view class="body">
			<!-- 卡片主体是一个插槽，需要父组件提供具体内容 -->
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		//组件的自定义属性
		props: {
			title: {
				type: String,
				default: '标题',
				required: false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.card {
	background-color: $uni-bg-color;
	margin-top: $uni-spacing-col-lg;
	flex-direction: column;  //弹性容器的主轴方向
	.header {
		padding: $uni-spacing-col-lg  $uni-spacing-row-lg;
		border-bottom: 1px solid $uni-border-color;
		font-size: $uni-font-size-sm;
		font-weight: bold;
	}
	.body {
		padding: $uni-spacing-col-base  $uni-spacing-row-lg;
	}
}
</style>